<template>
  <div id="left-panel" class="" style="max-height: 720px;">
    <div id="searchbox" class="clearfix">
        <div id="searchbox-container">
            <div id="sole-searchbox-content" class="searchbox-content is-complete">
                <input id="sole-input" class="searchbox-content-common" type="text" name="word"
                    autocomplete="off" style="font-family: Arial,Helvetica,SimSun,sans-serif;" maxlength="256"
                    placeholder="" v-model="searchtext" @keyup.enter="clicksearch">
                <div class="input-clear" title="清空" v-show="searchtext.length>0" @click="inputclear_click">
                </div>
                <div :class="['searchbox-content-button','right-button','loading-button','cancel-button',search_status==true?'loading':'']"
                    data-title="清空" @click="clear_cards"></div>
            </div>
        </div>
        <button id="search-button" data-title="搜索" data-tooltip="2"  @click="clicksearch"></button>
    </div>
    <ul id="cards-level0" class="cardlist" v-show="cardsid==0">

    </ul>
    <ul id="cards-level1" class="cardlist" v-show="cardsid==1">
        <li id="card-1" 
        :class="['card','animated-card',show_search_result_total?'fold':'']" 
        :data-fold="`共找到${search_result_total}个搜索结果`"
        style="z-index: 100; max-height:670px; overflow-y: hidden;" 
        @mouseover="card_mouseover">
            <div class="poi-wrapper">
                <el-scrollbar>
                    <div class="poi-filter"></div>
                    <div class="poi-sug-title"></div>
                    <div class="poi-suggest"></div>
                    <div class="poi-query-tip"></div>
                    <ul class="poilist">
                        <li 
                        class="search-item base-item" 
                        v-for="(item, index) in search_result_items"
                        :key="index" @click="itemclick(item,index)"
                        @mouseover="search_item_mouseover(item,index)"
                        @mouseout="search_item_mouseout(item,index)">
                            <div class="cf">
                                <div class="col-l"> <a href="javascript:void(0)" :class="['no-'+(index+1)]"></a></div>
                                <div class="col-r">
                                    <!-- <div class="mt_5 h_20">
                                        <a href="javascript:void(0)"
                                            class="camera-icon street-pano ml_5">&nbsp;</a>
                                    </div> -->
                                    <a-tooltip placement="bottom">
                                        <template slot="title">
                                            <!-- <span>点击查看或添加</span> -->
                                        </template>
                                        <div class="img-wrap" @click.stop="show_pics" v-show="item.result_details &&item.result_details.imglist.length>0">
                                            <a href="javascript:void(0)">
                                                <img :src="getpic_img(item.result_details.imglist[0],item.result_details.item)" style="width:71px;height:58px;">
                                            </a>
                                        </div>
                                    </a-tooltip>
                                    
                                </div>
                            </div>
                            <div>
                                <div class="ml_30 mr_90">
                                    <div class="row">
                                        <span>
                                            <a href="javascript:void(0);"
                                                class="n-blue">{{item.standard_name}}</a>
                                        </span>
                                        <span> </span>
                                    </div>
                                    <div class="row addr">
                                        <span class="n-grey"
                                            :title="getaddress(item)">{{getaddress(item)}}</span>
                                    </div>
                                    <div class="children-container row"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div id="poi_page" class="poi-page" v-if="search_result_total>10">
                        <a-pagination 
                            :current="currentPage"
                            :total="search_result_total" 
                            :showLessItems="true"
                            size="small"
                            @change="Pagechange"
                            style="text-align: center;"
                        />
                    </div>
                    <div class="poi-no-result" v-show="search_result_total==0">
                        <div id="user_feedback" class="blueC">没有找到结果。

                        </div>
                    </div>
                    <div class="poi-ads" v-if="cardsid==1 && search_result_total>0">
                        <div id="user_feedback" class="blueC">提醒您：结果有错误？请到
                            <a id="mapComplaintCenter" target="_blank"
                                href="http://dmfw.mca.gov.cn/">民政部国家地名信息库</a>反馈。
                        </div>
                        <div id="leadDownloadCard"></div>
                    </div>
                </el-scrollbar>
            </div>
        </li>

    </ul>
    <ul id="cards-level2" class="cardlist" v-show="cardsid==2">
        <li id="card-12" class="card animated-card" data-fold="展开" style="padding: 0px; overflow: hidden; z-index: 99; max-height: 670px;" >
            <poidetail :active_result_details="active_result_details"></poidetail>
        </li> 
    </ul>
  </div>
</template>
<script>
import Bus from '../../src/bus.js';
import jquery from 'jquery'
  export default {
    components: {
        poidetail: () => import("@/components/map/poidetail.vue"),
    },
    data() {
      return {
        searchtext: '', //搜索框。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        show_search_result_total:false,
        currentPage: 1, //分页的当前页码,
        cardsid: -1, //显示的cards 序号
        search_result_items: [], //搜索的分页结果
        search_result_total: 0, //搜索结果总数
        search_status: false, //搜索状态
        active_result_details: {}, //当前点击激活的搜索结果的详细信息,
        photo_list_style_value:{
            left: 0,
            top: 0,
        }
      }
    },
    mounted() {
        Bus.$on('hide_card', (regionid) => {
            if (this.search_result_total >0) {
                this.show_search_result_total=true
            }

        })
        Bus.$on('hover_indexs', (index, over_or_out) => {
            this.hover_indexs(index, over_or_out)

        })
        Bus.$on('back_to', (index) => {
            this.cardsid=index
        })
    },
    methods: {
        //清除查询关键字input
        inputclear_click() {
            this.searchtext = "";
        },
        //清除查询关键字input、cards不显示 poilayer清空
        clear_cards() {
            this.cardsid = -1
            this.searchtext = "";
            this.clearpoimaker();
        },
        clicksearch() {
            this.search();
            this.currentPage = 1;
            this.cardsid = 1
        },
        //分页 模糊查询
        search(page = 1) {
            this.search_result_items = []
            this.search_result_total = 0
            this.search_status = true;
            this.clearpoimaker();
            this.search_poi(this.searchtext,page)
            .then( data=>{
                this.search_status = false;
                if(data){
                    // this.search_result_items = data.records;
                    this.search_result_total = data.total;
                     this.serchdetailsEach(data.records);
                    
                }
               
            },()=>{
                that.search_status = false;
            })
        },
        addpoimaker(){
            this.search_result_items.forEach((item, index) => {
                item.point=item.pdm.coordinates[0]
                Bus.$emit('add_poi_marker',item,index+1);
            });
        },
        clearpoimaker(){
            Bus.$emit('clear_poi_marker');
        },
        //查询结果的分页查询 上一个 下一个什么的
        Pagechange(pagenum, pageSize) {
            this.currentPage = pagenum;
            this.search(pagenum)
        },
        //获取地址名
        getaddress(item) {
            return `${item.place_type}-${item.province_name}${item.city_name}${item.area_name}`
        },
        //根据id查询详细的属性信息
        async serchdetailsEach(records) {
            for (let index = 0; index < records.length; index++) {
                let item = records[index];
                let databack=await this.search_poi_detail(item.id)
                if (databack) {
                    let picnbck=await this.search_poi_pics(item.place_code,item.standard_name)
                    if (picnbck.photos) {
                        let photos=picnbck.photos.split('|')
                        if(photos.length>0){
                            databack.imglist=photos
                            databack.item=picnbck
                        }
                    }
                    records[index].result_details=databack
                    
                }
            }
            this.search_result_items=records
            this.$forceUpdate();
            this.addpoimaker();
        },
        serchdetails(item) {
            that.active_result_details = databack;
            


            let that=this;
            this.search_poi_detail(item.id)
            .then(async databack => {
                if (databack) {
                    let picnbck=await this.search_poi_pics(item.place_code,item.standard_name)
                    if (picnbck.photos) {
                        let photos=picnbck.photos.split('|')
                        if(photos.length>0){
                            databack.imglist=photos
                            databack.item=picnbck
                        }
                    }
                    that.active_result_details = databack;
                }
            },()=>{
                that.search_status = false;
            });
        },
        //查询结果的mouseove
        search_item_mouseover(item, index) {
            this.hover_links(index + 1, true)
        },
        //查询结果的mouseout
        search_item_mouseout(item, index) {
            this.hover_links(index + 1)
        },
        //查询结果当个单击事件
        itemclick(item, index) {
            this.active_result_details = item.result_details;
            // this.active_result_details
            // this.serchdetails(item)
            this.active_result = item;
            this.cardsid = 2
            //////
            this.hover_links(index + 1)
            Bus.$emit('fly_to', item.point[0],item.point[1]);
        },
        card_mouseover(){
            this.show_search_result_total=false;
        },
        //一个简单的地名问题反馈 指向http://dmfw.mca.gov.cn/
        fankui() {
            window.open('http://dmfw.mca.gov.cn/')
        },
        //poilayer中的maker的hover事件
        hover_links(index, over_or_out) {
            //地图上的切换图标
            Bus.$emit('poi_marker_hover',index,over_or_out);
            this.hover_indexs(index, over_or_out);
        },
        //查询结果li上的图标切换
        hover_indexs(index, over_or_out){
            if (over_or_out == true) {
                jquery(`#left-panel #cards-level1 .search-item .col-l .no-${index}`).parents('.search-item').addClass('hover')
            } else {
                jquery(`#left-panel #cards-level1 .search-item .col-l .no-${index}`).parents('.search-item').removeClass('hover')
            }
        },
        show_pics(event){
            let $target=jquery(event.target)
            this.photo_list_style_value.left=$target.offset().left
            this.photo_list_style_value.top=$target.offset().top
            let top_show=$target.offset().top-10;
            let left_show=$target.offset().left+100;


        },
    }
  }
</script>